<template>
	<div class="body4">
		<div class="container">
			<!-- 注册-->
			<div class="container-form container-signup">
				<el-form ref="registform" :model="registform" class="form" id="form2">
					<h2 class="form-title">注册账号</h2>
					<el-form-item>
						<el-input v-model="registform.mailbox" placeholder="Email"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="registform.password" placeholder="Password"></el-input>
					</el-form-item>
					<div style="position: relative;left: -53px;">
						<el-form-item>
							<el-input v-model="registform.emailvcode" placeholder="邮箱验证码" style="width:70%;"></el-input>
						</el-form-item>
						<!-- <input type="text" placeholder="邮箱验证码" class="input" style="width:70%;" /> -->
						<button
							style="position: relative;left: 155px; top: -53px; width: 40%;height: 58%;background-color: #f25d8e;color: #fff; cursor: pointer;"
							@click="registForEmailVcode()">发送验证码</button>
					</div>
					<button type="button" class="btn" @click="regist()">点击注册</button>
				</el-form>
			</div>
			<!-- 邮箱密码登录-->
			<!-- <div class="container-form container-signin">
				<el-form ref="form" :model="form" class="form" id="form3" v-if="activeForm===1">
					<h2 class="form-title">欢迎登录</h2>
					<el-form-item >
					    <el-input v-model="form.mailbox" placeholder="Email"></el-input>
					</el-form-item>
					<el-form-item >
					    <el-input v-model="form.password" placeholder="Password"></el-input>
					</el-form-item>
					<el-form-item >
					    <el-input v-model="form.verificationCode" placeholder="Captcha"></el-input>
					</el-form-item>
					<!-- 图形验证码 -->
			<!-- 	<img :src="curl" @click="cimg()" /> -->
			<!-- <a href="#" class="link">忘记密码</a> -->
			<!-- 	<el-button type="primary" @click="showForm(3)">忘记密码</el-button>
					<button type="button" class="btn" @click="toIndex()">登录</button>
					<el-button type="primary" @click="showForm(2)">使用邮箱验证码登录</el-button> -->
			<!-- <button @click="isShow=true">使用邮箱验证码登录</button> -->
			<!-- 	</el-form>
			</div> --> -->
			<!-- 邮箱验证码登录 -->
			<div class="container-form container-signin">
				<el-form ref="emailVcodeForm" :model="emailVcodeForm" class="form" id="form4" v-if="activeForm===2">
					<h2 class="form-title">欢迎登录</h2>
					<el-form-item>
						<el-input v-model="emailVcodeForm.mailbox" placeholder="Email"></el-input>
					</el-form-item>
					<div style="position: relative;left: -53px;">
						<el-form-item>
							<el-input v-model="emailVcodeForm.emailvcode" placeholder="邮箱验证码"
								style="width:70%;"></el-input>
						</el-form-item>
						<!-- <input type="text" placeholder="邮箱验证码" class="input" style="width:70%;" /> -->
						<button
							style="position: relative;left: 155px; top: -53px; width: 40%;height: 58%;background-color: #f25d8e;color: #fff; cursor: pointer;"
							@click="sendForEmailVcode()">发送验证码</button>
					</div>
					<el-button type="primary" @click="toLoginByEmailVcode()">登录</el-button>
					<br />
					<el-button type="primary" size="small" @click="jump('/loginEP')">使用邮箱密码登录</el-button>
					<!-- <br /> -->
					<!-- <button @click="isShow=false">使用邮箱密码登录</button> -->
				</el-form>
			</div>
			<!-- 忘记密码 -->
			<!-- <div>
				<el-form ref="forgetPassword" :model="registform" class="form" id="form5" v-if="activeForm===3">
					<h2 class="form-title">找回密码</h2>
					<el-form-item >
					    <el-input v-model="registform.mailbox" placeholder="Email"></el-input>
					</el-form-item>
					<el-form-item >
					    <el-input show-password v-model="registform.password" placeholder="New Password"></el-input>
					</el-form-item>
					<div style="position: relative;left: -53px;">
						<el-form-item >
						    <el-input v-model="registform.emailvcode" placeholder="邮箱验证码" style="width:70%;"></el-input>
						</el-form-item>
						<button
							style="position: relative;left: 155px; top: -53px; width: 40%;height: 58%;background-color: #f25d8e;color: #fff; cursor: pointer;"
							@click="forgetForEmailVcode()">发送验证码</button>
					</div>
					<button type="button" class="btn" @click="forgetForNewPassword()">提交</button>
					
				</el-form>
			</div> -->
			<!-- 叠加层部分 -->
			<div class="container-overlay">
				<div class="overlay">
					<div class="overlay-panel overlay-left">
						<button class="btn" id="signIn" @click="signIn()">
							已有账号,直接登录
						</button>
					</div>
					<div class="overlay-panel overlay-right">
						<button class="btn" id="signUp" @click="signUp()">
							没有账号,点击注册
						</button>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		set
	} from 'vue'
	export default {
		data() {
			return {
				activeForm: 2,
				isShow: false,
				curl: "",
				key: "",
				form: {
					mailbox: "",
					password: "",
					verificationCode: ""
				},
				registform: {
					mailbox: "",
					password: "",
					emailvcode: ""
				},
				emailVcodeForm: {
					mailbox: "",
					emailvcode: ""
				}
			}
		},

		computed: {
			// 计算属性  
		},
		methods: {
			// 方法  
			signIn() {
				const container = document.querySelector(".container")
				container.classList.remove("panel-active")
			},
			signUp() {
				const container = document.querySelector(".container")
				container.classList.add("panel-active")
			},

			cimg() {
				this.key = Math.random();
				this.curl = 'http://localhost:8190/captcha/Vcode?key=' + this.key;
			},
			//注册用发送邮箱验证码
			registForEmailVcode() {
				console.log("注册用发送邮箱验证码")
				axios.post("http://localhost:8190/userlogin/registSendMailVcode", this.registform)
					.then(resp => {

						if (resp.data.code === 200) {
							this.$message({
								message: resp.data.message,
								type: 'success'
							});
							this.$router.push('/loginEP');
						} else {

							this.$message({
								message: resp.data.message,
								type: 'success'
							});
							window.location.reload();

						}

					})


			},
			//注册
			regist() {

				axios.post("http://localhost:8190/userlogin/regist", this.registform)
					.then(resq => {

						if (resq.data.code != 200) {

							this.$message({
								message: resq.data.message,
								type: 'success'
							});
							window.location.reload();


						} else {

							this.$message({
								message: resq.data.message,
								type: 'success'
							});
							this.$router.push('/loginEP');

						}






					})

			},
			// 发送邮箱验证码
			sendForEmailVcode() {

				console.log("发送邮箱验证码")
				axios.post("http://localhost:8190/userlogin/sendMailVcode", this.emailVcodeForm)
					.then(resq => {

						if (resq.data.code != 200) {

							this.$message({
								message: resq.data.message,
								type: 'success'
							});
							window.location.reload();


						} else {

							this.$message({
								message: resq.data.message,
								type: 'success'
							});
						}



					})


			},
			// 忘记密码后发送邮箱验证码

			//使用发送到邮箱的验证码登录
			toLoginByEmailVcode() {

				console.log("发送请求")
				axios.post("http://localhost:8190/userlogin/loginByMailVcode", this.emailVcodeForm)
					.then(res => {

						if (200 === res.data.code) {
							localStorage.setItem("LZY-TOKEN", res.data.data.token);
							localStorage.setItem("USER-ID", res.data.data.user_id);
							//登录成功，设置userid,token到vuex,登录状态改为以登录
							this.$store.commit('updateLoginState', true, res.data.data.user_id, res.data.data.token);

							this.$message({
								message: res.data.message,
								type: 'success'
							});

							//登录成功跳转首页
							this.$router.push('/home');

						} else {
							//登录失败
							this.$message({
								message: res.data.message,
								type: 'success'
							});
							window.location.reload();
						}



					})



			},
			//重设密码

			showForm(formNumber) {
				this.activeForm = formNumber;
			},
			//路由跳转
			jump(url) {
				this.$router.push(url);
			},
			//设置一个过两秒钟自动消失的弹窗
			showPopup(message) {
				// 创建弹窗元素
				var popup = document.createElement('div');
				popup.className = 'popup';
				popup.textContent = message;

				// 将弹窗添加到页面中
				document.body.appendChild(popup);

				// 两秒后自动消失
				setTimeout(function() {
					popup.style.display = 'none';
				}, 2000);
			}

		},
		mounted() {
			console.log("login2")
		}
	}
</script>

<style>

</style>